import React, { useEffect, useCallback, useMemo, lazy, Suspense } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import URI from 'urijs';
import dayjs from 'dayjs';

import './App.css'

import {
	setDepartStation,
	setArriveStation,
	setTrainNumber,
	setSeatType,
	setDepartDate,
	setSearchParsed,
	fetchInitial,
	createAdult,
	createChild,
	removePassenger,
	updatePassenger,
	hideMenu,
	showGenderMenu,
	showFollowAdultMenu,
	showTicketTypeMenu,
} from './store/actions';

import Header from '../components/header/Header'
import Detail from '../components/detail/Detail'

import Menu from './components/menu/Menu'
import Ticket from './components/ticketType/Ticket'
import Passengers from './components/passengers/Passengers'
import Account from './components/account/Account'
import Choose from './components/choose/Choose'


function App (props) {
	const {
		trainNumber,
		departStation,
		arriveStation,
		seatType,
		departDate,
		arriveDate,
		departTimeStr,
		arriveTimeStr,
		durationStr,
		price,
		passengers,
		menu,
		isMenuVisible,
		searchParsed,
		dispatch,
	} = props;

	const onBack = useCallback(() => {
		window.history.back();
	}, []);

	useEffect(() => {
		const queries = URI.parseQuery(window.location.search);

		const { trainNumber, dStation, aStation, type, date } = queries;

		dispatch(setDepartStation(dStation));
		dispatch(setArriveStation(aStation));
		dispatch(setTrainNumber(trainNumber));
		dispatch(setSeatType(type));
		dispatch(setDepartDate(dayjs(date).valueOf()));
	}, []);

	useEffect(() => {
		const url = new URI('/mock/order.json');
		dispatch(fetchInitial(url))
	}, []);


	const passengersCbs = useMemo(() => {
		return bindActionCreators(
			{
				createAdult,
				createChild,
				removePassenger,
				updatePassenger,
				showGenderMenu,
				showFollowAdultMenu,
				showTicketTypeMenu,
			},
			dispatch
		);
	}, []);

	const chooseCbs = useMemo(() => {
		return bindActionCreators(
			{
				updatePassenger,
			},
			dispatch
		);
	}, []);

	const menuCbs = useMemo(() => {
		return bindActionCreators({
			hideMenu
		}, dispatch)
	}, [])
	return (
		<div className="app">
			<div className="header-wrapper">
				<Header title="订单填写" onBack={onBack} />
			</div>
			<div className="detail-wrapper">
				<Detail
					departDate={departDate}
					arriveDate={arriveDate}
					departTimeStr={departTimeStr}
					arriveTimeStr={arriveTimeStr}
					trainNumber={trainNumber}
					departStation={departStation}
					arriveStation={arriveStation}
					durationStr={durationStr}
				>
					<span
						style={{ display: 'block' }}
						className="train-icon"
					></span>
				</Detail>
			</div>

			<Ticket price={price} type={seatType} />
			<Passengers passengers={passengers} {...passengersCbs} />
			{passengers.length > 0 && (
				<Choose passengers={passengers} {...chooseCbs} />
			)}
			<Account length={passengers.length} price={price} />
			<Menu show={isMenuVisible} {...menu} {...menuCbs} />

		</div>
	)
}

export default connect(
	function mapStateToProps (state, ownProps) {
		return state;
	},
	function mapDispatchToProps (dispatch) {
		return { dispatch }
	}
)(App);